<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>物品详情</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


<!--   <link rel="stylesheet" href="../../../css/sm.min.css">
  <link rel="stylesheet" href="../../../css/sm-extend.min.css">
  <link rel="stylesheet" href="../../../css/swiper.min.css">
  <script type="text/javascript" src="../../../common/common.js"></script> -->
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm-extend.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/swiper.min.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/common/common.js"></script>

  <style>
    /*设置默认样式*/
   *{
    margin:0;
    padding:0;
   }
   li{
    list-style: none;
   }
   a{
     text-decoration: none;
   }

   /*页面顶部返回按钮*/
   #back-icons{
      position: absolute;
      top:1.3%;
      left:1%;
      z-index: 100;
   }
   #back-icons img{
     display: block;
   }

    /*轮播图样式*/
 .swiper-container {
    width:100%;
    height:35%;
}  
 .swiper-slide {
   text-align: center;
  }
 .swiper-slide img{
     display: block;
     width: 100%;
     height:100%;
   }
   /*底部工具栏样式*/
  #tollbar{
    width:100%;
    height:2.9rem;
    border: 1px solid black;
    position:absolute;
    bottom:0;
  }
  #tollbar>ul li{
    float: left;
    margin-left:8%;
    text-align: center;
  }
   #tollbar>ul li img{
    display: block;
   }
   #tollbar>ul li span{
    font-size:0.5rem;
   }
/*下载按钮样式*/
#tollbar>ul #down{
  background:#b6babe;
  width:55%;
  height:2.85rem;
  line-height:2.85rem;
  text-align: center;
  position: absolute;
  right:0;
}
  /*遮罩层效果*/
  #shade{
  width:100%;
  background:rgba(0,0,0,0.3);
  z-index: 200;
  position: absolute;
  bottom: 0;
 /* display: none;*/ 
}
/*弹框样式*/
#down-phone{
   width:40%;
   float: left;
   margin-left:30%;
   position: absolute;
   top:30%;
   z-index:300;
   display: none;
}
/*下载到手机*/
#down-phone a{
  display: block;
  width:100%;
  height:2rem;
  line-height: 2rem;
  text-align: center;
}
/*下载到邮箱*/
#down-email{
   width:40%;
   float: left;
   margin-left:30%;
   position: absolute;
   top:38%;
   z-index:300;
   display: none;
}
#down-email a{
  display: block;
  width:100%;
  height:2rem;
  line-height: 2rem;
  text-align: center;
  background:#778899;
}

  </style>
</head>
<body>
  
  <div class="page-group">
    <div class="page">
      <!-- 页面导航图标 -->
      <div id="back-icons">
          <img src="../../../img/back.png">
      </div>
      <!-- 页面内容区域 -->
      <!-- 页面轮播 -->
      <div class="content">
        <!-- Slider -->
          <div class="swiper-container" id="swiper1">
              <div class="swiper-wrapper">
                  <div  class="swiper-slide"><img src="../../../img/timg.jpg"></div>
                  <div  class="swiper-slide"><img src="../../../img/timg.jpg"></div>
                  <div  class="swiper-slide"><img src="../../../img/timg.jpg"></div>
              </div>
               <!-- 分页器 -->
              <div class="swiper-pagination"></div>
          </div>
          <!-- 页面主体文字部分 -->
          <div style="margin-top:30%;">
            <h4>详情</h4>
            <p>
               内容部分后台上传
            </p>
          </div>
          <!-- 点击下载弹出的弹窗遮罩层部分 -->
          <div id="shade">
          
          </div>
          <p id="down-phone"><a href="#" class="button button-fill">下载到手机</a></p>
          <p id="down-email" onclick="window.location.href='treasurebox_email.html'"><a href="#" class="button button-fill">下载到邮箱</a></p>
          <!-- 底部工具栏部分 -->
          <div id="tollbar">
             <ul>
                <li>
                  <img src="../../../img/custom.png">
                  <span>客服</span>
                </li>
                <li>
                   <img src="../../../img/collect.png">
                  <span>收藏</span>
                </li>
                <li id="down">下载</li>
             </ul>
          </div>

      </div>




    </div>
  </div>
  <!-- !-- 固定的js引用，所有的jQuery 要用 $$ 表示 --> -->
<script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/sm.min.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script> -->
<script src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/swiper/swiper.min.js"></script>

<script type="text/javascript">

  // banner函数
  function swiperFun() {
    var mySwiper = new Swiper("#swiper1", {
      direction: "horizontal",
      loop: true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination'
      },
      autoplay: {
        delay: 3000, // 1秒切换一次
        disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay。默认为true：停止
      }, //可选选项，自动滑动
      speed: 300, // 速度300
      // pagination: ".swiper-pagination",
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, //修改swiper的父元素时，自动初始化swiper
    });
  }

  // 点击下载弹框事件
  function downPop(){    
      // 点击下载显示div
      $$('#down').click(function(event){
              event.stopPropagation();
              // 遮罩层显示
              $$('#shade').show();
              var docheight = $$(document).height();
              $$('#shade').css({"height" : docheight});
              // 手机 邮箱 按钮显示
              $$('#down-phone').show();
              $$('#down-email').show();

      });
      // 点击页面隐藏遮罩层和下载按钮
      $$(document).click(function(){
             $$('#shade').hide();
             $$('#down-phone').hide();
             $$('#down-email').hide();
       });
  }

  

  //需要初始化传递数据的函数，函数名，跟参数都不要变，固定写死的
  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
     /*var jodata = JSON.parse(data); 
     if(isNotNull(jodata)){//
        
     }*/
     if(isNotNull(data)){
        // $$("#div_version").html("版本号：V"+data);
     }
  }



  	
    // 初始化
    $(function(){
      $.init();
      swiperFun(); 
      downPop();

    });
  </script>
</body>
</html>